<!DOCTYPE html>
<html>
    <script src='source.js'></script>

    <body>
        <div id='main' style='width: 50%; float:left; height:100%; margin:10px'>
            <p id='text'>hi</p>
            <table>
                <p id='actions'>Actions Available: 3</p>
                <tr>
                    <th>FOOD</th>
                    <th>WATER</th>
                    <th>WOOD</th>
                </tr>
                <tr>
                    <td id='food'>10</td>
                    <td id='water'>10</td>
                    <td id='wood'>15</td>
                </tr>
            </table>
            <button onclick='moreFood()'>More Food</button>
            <button onclick='moreWater()'>More Water</button>
            <button onclick='moreWood()'>More Wood</button>
            <button onclick='endTurn()'>End Turn</button>
            <p id='warnings'></p>
        </div>

        <div id='second' style='width: 20%; float:left; height:100%; margin:10px'>
            <p id='pop'>Population: 8/8</p>

            <h2>BUILD</h2>

            <p><b>Home  </b></p>
            <p id='homes'>2<p>
            <p id='homeMat'>Required: 50 Wood</p>
            <button onclick='buildHouse()'>Build a home</button>

            <p><b>Farm</b></p>
            <p id='farm'>0</p>
            <p id='farmMat'>Required: 40 Wood</p>
            <button onclick='buildFarm()'>Build Farm</button>
        </div>
    </body>
</html>